<template>
  <div>
    <div class="m-date">
      <div class="box-hd">
        <span class="date"></span>
        <div class="block-cell">
          <div class="cell-left">开始：</div>
          <div class="cell-right">
            <input type="text" readonly class="choice-time date-start" v-model="startTime" placeholder="请选择时间" @click="openPicker(0)">
          </div>
        </div>
        <div class="block-cell">
          <div class="cell-left">结束：</div>
          <div class="cell-right">
            <input type="text" readonly class="choice-time date-start" v-model="endTime" placeholder="请选择时间" @click="openPicker(1)">
          </div>
        </div>
        <div class="btn-confirm" @click="makeSure">确定</div>
      </div>
    </div>
    <div class="datePicker">
      <mt-datetime-picker type="date" ref="picker" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm">
      </mt-datetime-picker>
    </div>
  </div>
</template>
<script>
  import { DatetimePicker, Toast, Popup, Picker } from 'mint-ui';//- mint-ui插件
  export default {
    name:'',
    data() {
      return {
        startTime: this.getDate(new Date()),  //- 选择筛选的开始时间
        endTime: this.getDate(new Date()),//- 选择筛选的结束时间
        changeTimeType:'',//用来识别是修改开始时间或者结束时间  0开始时间  1结束时间
      }
    },
    methods:{
      openPicker(e) {
        this.changeTimeType = e;
        this.$refs.picker.open();
      },
      getDate(data) {
        return this.birthday = new Date(data).getFullYear() + '-' + (new Date(data).getMonth() + 1) + '-' + new Date(data).getDate();
      },
      handleConfirm(data) {
        var time = this.getDate(data)
        this.birthday = time;
        if (this.changeTimeType ===0) {
          this.startTime = time;
        }else{
          this.endTime = time;
        }
      },
      // 点击确认
      makeSure(){
        var timeObj={
          startTime: this.startTime,
          endTime: this.endTime
        }
        this.$emit('searchTime', timeObj);//select事件触发后，自动触发showCityName事件
      }
    }
  }

</script>
<style lang="less" scoped>
  .m-date {
    .box-hd {
        position: relative;
        clear: both;
        margin-bottom: 10pt;
        padding: 0 5pt 0 12%;
        height: 30pt;
        border-radius: 5px;
        background-color: #fff;
        line-height: 30pt;
        span {
          position: absolute;
          top: 9%;
          left: 2%;
          display: inline-block;
          width: 20pt;
          height: 20pt;
          background-image: url(../assets/images/图标.png);
          background-position: -27px -393px;
          background-size: 515px
        }
        .block-cell {
          float: left;
          overflow: hidden;
          width: 42%;
          height: 30pt;
          line-height: 30pt;
          .cell-left {
            float: left;
            width: 33pt;
            font-size:14px;
          }
          .cell-right {
            margin-left: 33pt
          }
        }
    }
    .box-hd{
      .btn-confirm{
        float: left;
        margin-top: 3%;
        width: 16%;
        height: 16pt;
        border-radius: 1pc;
        background-color: #22d8d4;
        color: #fff;
        text-align: center;
        line-height: 17pt;
        font-size:14px;
      }
    }
  }

</style>
